/**
 * 跨多级组件通信：
 * 1. Provider: 提供共享数据 =》<Provider value={data}></Provider>
 * 2. Consumer: 接收共享数据 =》<Consumer>{callback}</Consumer>
 *
 * react hooks提供了一个钩子函数：const data = useContext(传入创建的context对象)(推荐)
 */

import { createContext, useContext, useState } from 'react'

// 1. 创建context对象=>createContext中包含 Provider Consumer 两个组件 可以解构
// const {Provider,Consumer} = createContext()
//====总结====孙子组件想用爷爷组件的 变量或者方法有两种方法

/**
 *  第一种就是原来的 Provider  Consumer 方法 在jsx中获取
 * 第二种就是 useContext 方法
 */
const DataContext = createContext()
function GrandSon(params) {
  // 现在：使用useContex在js中获取共享数据
  // const data1 = useContext(DataContext)
  const { count, setCount } = useContext(DataContext)
  // console.log('js中获取共享数据：', data1)
  return (
    <div>
      <h3
        onClick={() => {
          setCount(count + 1)
        }}>
        孙子:{count}
      </h3>
      <DataContext.Consumer>
        {(data) => {
          return <h2>共享数据：{data.count}</h2>
        }}
      </DataContext.Consumer>
    </div>
  )
}
function Son(params) {
  return (
    <div>
      <h2>儿子</h2>
      <hr />
      <GrandSon />
    </div>
  )
}
function App() {
  const [count, setCount] = useState(0)
  return (
    <DataContext.Provider
      value={{
        count,
        setCount,
      }}>
      <h1>useContext使用-爷爷</h1>
      <hr />
      <Son />
    </DataContext.Provider>
  )
}

export default App
